<template>
  <scroll-view scroll-y="true" class="scroll-container">
    <!-- 1. 顶部轮播图 -->
    <view class="module-wrapper">
      <swiper
        autoplay
        interval="3000"
        circular
        indicator-dots
        indicator-color="#999"
        indicator-active-color="#007aff"
        class="banner-swiper"
      >
        <swiper-item v-for="(img, index) in bannerImages" :key="index">
          <image :src="img" mode="aspectFill" class="banner-img" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 城市介绍 -->
    <view class="module-wrapper">
      <view class="city-intro" v-html="quanzhouIntro"></view>
    </view>

    <!-- 3. 探索进度 -->
    <view class="module-wrapper">
      <view class="module-card">
        <view class="section-title">探索进度</view>
        <view class="progress-text">当前进度: {{ progress }}%</view>
        <progress 
          :percent="progress" 
          show-info 
          stroke-width="6" 
          activeColor="#1E88E5"
          backgroundColor="#E0E0E0" 
        />
      </view>
    </view>

    <!-- 4. 地区选择 -->
    <view class="module-wrapper">
      <view class="city-select">
        <text class="select-title">选择地区</text>
        <picker 
          :range="currentRange" 
          :value="currentValue" 
          @change="handlePickerChange"
        >
          <view class="picker-display">
            {{ selectedProvince ? `${selectedProvince}${selectedCity ? '-' + selectedCity : ''}${selectedDistrict ? '-' + selectedDistrict : ''}` : '请选择省份' }}
          </view>
        </picker>
        <view class="picker-hint">
          {{ currentStep === 0 ? '请先选择省份' : currentStep === 1 ? '请选择城市' : '请选择分区' }}
        </view>
      </view>
    </view>

    <!-- 5. 偏好设置 -->
    <view class="module-wrapper">
      <view class="preference-setting">
        <text class="setting-title">偏好设置</text>
        <view class="travel-mode">
          <text>出行方式：</text>
          <radio-group @change="e => travelMode = e.detail.value">
            <label v-for="mode in travelModes" :key="mode.value" class="radio-label">
              <radio :value="mode.value" :checked="travelMode === mode.value"></radio>
              {{ mode.label }}
            </label>
          </radio-group>
        </view>
        <view class="recommend-spots">
          <text>显示推荐景点：</text>
          <switch :checked="showRecommendSpots" @change="e => showRecommendSpots = e.detail.value"></switch>
        </view>
        <view class="explore-radius">
          <text>探索半径：{{ exploreRadius }}km</text>
          <slider :value="exploreRadius" :min="1" :max="50" @change="e => exploreRadius = e.detail.value"></slider>
        </view>
      </view>
    </view>

    <!-- 6. 媒体展示（视频） -->
    <view class="module-wrapper">
      <view class="video-container">
        <text class="video-title">泉州宣传视频</text>
        <video
          :src="cityVideo"
          :poster="videoPoster"
          controls
          autoplay="false"
          class="city-video"
        ></video>
      </view>
    </view>

    <!-- 7. 音乐播放 -->
    <view class="module-wrapper">
      <view class="module-card">
        <view class="section-title">泉州背景音乐</view>
        <button class="music-btn" :class="{ playing: isPlaying }" @click="toggleMusic">
          {{ isPlaying ? '暂停' : '播放' }}
        </button>
        <view class="music-desc">泉州南音 - 泉州传统乐团</view>
      </view>
    </view>

    <view class="bottom-padding"></view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 轮播图
const bannerImages = ref(['/static/city4.jpg', '/static/city2.jpg', '/static/city5.jpg'])

// 城市介绍
const quanzhouIntro = ref(`
  <h2 style="color:#007aff;margin:0 0 16rpx 0;padding:0;">泉州</h2>
  <p style="margin:0 0 12rpx 0;line-height:1.6;">泉州，古称刺桐，是海上丝绸之路的起点，有着悠久的历史与灿烂的文化。宋元时期，它是世界知名的港口城市，与众多国家和地区开展贸易与文化交流。</p>
  <p style="margin:0;line-height:1.6;">这里有<span style="color:#007aff;font-weight:bold;">开元寺</span>、<span style="color:#007aff;font-weight:bold;">清源山</span>、<span style="color:#007aff;font-weight:bold;">洛阳桥</span>等众多历史文化遗迹，还有南音、梨园戏等独具特色的闽南民俗文化，是一座充满魅力的历史文化名城。</p>
`)

// 探索进度
const progress = ref(60)

// 地区数据
const provinces = ref(['福建省', '浙江省', '广东省', '江苏省'])
const fujianCities = ref(['泉州市', '福州市', '厦门市', '漳州市', '莆田市'])
const quanzhouDistricts = ref([
  '鲤城区', '丰泽区', '洛江区', '泉港区', 
  '石狮市', '晋江市', '南安市', 
  '惠安县', '安溪县', '永春县', '德化县'
])

// 选择器状态
const currentStep = ref(0)
const currentRange = ref(provinces.value)
const currentValue = ref(0)

// 选中结果
const selectedProvince = ref('')
const selectedCity = ref('')
const selectedDistrict = ref('')

// 处理选择逻辑
const handlePickerChange = (e) => {
  const idx = e.detail.value
  if (currentStep.value === 0) {
    selectedProvince.value = currentRange.value[idx]
    currentRange.value = selectedProvince.value === '福建省' ? fujianCities.value : []
    currentValue.value = 0
    currentStep.value = 1
  } else if (currentStep.value === 1) {
    selectedCity.value = currentRange.value[idx]
    if (selectedProvince.value === '福建省' && selectedCity.value === '泉州市') {
      currentRange.value = [...quanzhouDistricts.value]
      currentValue.value = 0
      currentStep.value = 2
    } else {
      selectedDistrict.value = ''
      currentStep.value = 2
    }
  } else if (currentStep.value === 2 && selectedCity.value === '泉州市') {
    selectedDistrict.value = currentRange.value[idx]
  }
}

// 偏好设置
const travelModes = ref([
  { label: '公交', value: 'bus' },
  { label: '自驾', value: 'selfDrive' },
  { label: '步行', value: 'walk' }
])
const travelMode = ref('bus')
const showRecommendSpots = ref(true)
const exploreRadius = ref(20)

// 音视频资源
const cityVideo = ref('/static/city-video.mp4')
const videoPoster = ref('/static/video-poster.jpg')
const cityMusic = ref('/static/city-music.mp3')

// 音频控制
const isPlaying = ref(false)
const audioContext = ref(null)

onMounted(() => {
  audioContext.value = uni.createInnerAudioContext()
  audioContext.value.src = cityMusic.value
  audioContext.value.loop = true
})

const toggleMusic = () => {
  isPlaying.value ? audioContext.value.pause() : audioContext.value.play()
  isPlaying.value = !isPlaying.value
}
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  background-color: #f5f5f5;
  padding: 15rpx;
}

.module-wrapper {
  margin-bottom: 20rpx;
}

.banner-swiper {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
  display: block;
}

.city-intro, .module-card, .city-select, .preference-setting, .video-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title, .select-title, .setting-title, .video-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.progress-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.picker-display {
  padding: 18rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.picker-hint {
  font-size: 24rpx;
  color: #999;
  padding-left: 5rpx;
}

.travel-mode, .recommend-spots, .explore-radius {
  margin-bottom: 25rpx;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
}
.travel-mode text, .recommend-spots text, .explore-radius text {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
}
.radio-label {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}
.radio-label radio {
  margin-right: 8rpx;
}
.explore-radius {
  flex-direction: column;
  align-items: flex-start;
}
.explore-radius text {
  margin-bottom: 10rpx;
}
.explore-radius slider {
  width: 100%;
}

.city-video {
  width: 100%;
  height: 360rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.music-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #1E88E5;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-btn.playing {
  background-color: #ff5722;
}
.music-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}

.bottom-padding {
  height: 30rpx;
}
</style>